<!--
    问卷库管理新增页面
-->
<template>
    <div id="main">
        <Header/>
        <div id="center">
            <div class="tab_top">
                <div class="tab">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">问卷调研</el-breadcrumb-item>
                    <el-breadcrumb-item>{{this.$route.query.id}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="gobackbtn">
                    <el-button size="small" @click="$router.back()">返回</el-button>
                </div>
            </div>
            <div class='question-update-box'>
        <el-button type="info"
        style="margin-left: 25px;margin-top: 20px"
                   plain
                   @click="addNew('radio')">新增单选题</el-button>
        <el-button type="info"
                   plain
                   @click="addNew('checkbox')">新增多选题</el-button>
        <el-button type="info"
                   plain
                   @click="addNew('textarea')">新增填空题</el-button>
        <div class="btns-split"></div>
        <div class="question-name-desc">
            <div class="name">
                <p>问卷名称<span>*</span></p>
                <el-input v-model.trim="name"
                          placeholder="请输入问卷名称"
                          show-word-limit
                          maxlength="50"></el-input>
            </div>
            <el-input v-model.trim="desc"
                      type="textarea"
                      :rows="5"
                      placeholder="描述"
                      show-word-limit
                      maxlength="1000"></el-input>
        </div>
        <ul>
            <li v-for="(item,index) in questions"
                :key="'li'+index">
                <div class="left">
                    <div class="title">
                        <p><span>{{index+1}}.[{{item.type==='radio'?'单选':item.type==='checkbox'?'多选':'填空'}}]</span>题目：
                        </p>
                        <el-input v-model="item.title"></el-input>
                    </div>
                    <div class="li-options-box">
                        <p>选项：</p>
                        <div class="options">
                            <div v-for="(child,inde) in item.options"
                                 :key="'child'+inde">
                                <el-input v-model.trim="child.name"
                                          placeholder="请输入选项"
                                          class="options-input"></el-input>
                                <div class="options-icons">
                                    <i v-if="!(item.options.length===1 && inde===0)"
                                       class="el-icon-remove-outline"
                                       @click="opts('remove',index,inde)"></i>
                                    <i class="el-icon-circle-plus-outline"
                                       @click="opts('add',index,inde)"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="icons">
                        <div class="move">
                            <i class="el-icon-top"></i>
                            <i class="el-icon-bottom"></i>
                        </div>
                        <i class="el-icon-delete-solid"></i>
                    </div>
                    <el-radio v-model="item.isRequired"
                              label="必填"
                              style="display:block"></el-radio>
                    <el-radio v-model="item.isOtherOptions"
                              label="允许其他值"></el-radio>
                </div>
            </li>
        </ul>
    </div>
        </div>
    </div>
</template>
<script>
// import Header from "../../components/Header.vue"
import Header from "../../../components/Header.vue"
export default {
    data() {
        return {
            n:1,
            radio: '1',
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            name: '',  //问卷名称
            desc: '',  //描述
            id: '',  // 问卷id
            questions: [
                // {
                //     type: 'radio',
                //     title: '',
                //     options: [
                //         { name: '', type: 'normal' }
                //     ],
                //     isRequired: false,
                //     isOtherOptions: false
                // },
                // { type: 'checkbox', title: '', options: [], isRequired: true, isOtherOptions: true },
                // { type: 'textarea', title: '', options: [], isRequired: true, isOtherOptions: true }
            ],
            optType: 'ADD'
        }
    },
    components: {
        Header
    },
    mounted() {
        // console.log(this.$route)
    },
    methods: {
        addNew (type) {
            if (type === 'radio') {
                this.questions.push({
                    type: 'radio',
                    title: '',
                    options: [
                        { name: '', type: 'normal' }
                    ],
                    isRequired: false,
                    isOtherOptions: false
                })
            } else if (type === 'checkbox') {
                this.questions.push({
                    type: 'checkbox',
                    title: '',
                    options: [
                        { name: '', type: 'normal' }
                    ],
                    isRequired: false,
                    isOtherOptions: false
                })
            } else if (type === 'textarea') {
                this.questions.push({
                    type: 'textarea',
                    title: '',
                    options: [],
                    isRequired: false,
                    isOtherOptions: false,
                    answer: ''
                })
            }
        },
        // 新增选项
        opts (type, index, inde) {
            if (type === 'remove') {
                this.questions[index].options.splice(inde, 1)
            } else if (type === 'add') {
                this.questions[index].options.push({
                    name: '',
                    type: 'normal'
                })
            }
        },
        // 获取问卷详情
        getDetail () {
            let params = {
                id: this.id
            }
            this.axios.get(this.$api.GET_QUESTION_DETAIL, { params }).then(res => {
                this.questions = res.content.list
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
}
</script>
<style lang='stylus'>
#main {
    width: 19.1rem;
    height: 14rem;
    background: #EBEFF0;
    font-size: 12px;
}
#center{
    width: 12rem;
    height: 11.75rem;
    margin: 0 auto;
    background: #FFFFFF;
    margin-top: 0.4rem;
}
.tab_top{
    height: 0.64rem;
    border-bottom: solid 2px #f2f2f2;
}
.tab{
    float: left;
    margin-top: 25px;
    margin-left: 24px;
}
.gobackbtn{
    float: right;
    line-height: 0;
    margin-right: 20px;
}
#middle-btn{
    line-height: 0;
    height: 0.8rem;
    border-bottom: solid 2px #f2f2f2;
}
#middle-btn button:nth-child(1){
    margin-left: 20px;
}
#addquestionnairedetails{
    width: 90%;
    margin: 0 auto;
    margin-top: 0.3rem;
}
.activeinfo{
    margin-top: 0.2rem;
    margin-bottom: 24px;
}
textarea{
    min-height: 105.6px !important;
}
.question-update-box {
    padding-bottom: 0.48rem
    .btns-split {
        width: 100%
        height: 1px
        background: #F5F5F5
        margin-top: 0.16rem
        margin-bottom: 0.24rem
    }
    .question-name-desc {
        margin-bottom: 0.24rem
        .name {
            display: flex
            justify-content: space-between
            align-items: center
            margin-bottom: 0.16rem
            >p {
                width: 100px
                font-size: 0.16rem
                color: #666666
                >span {
                    color: #F04646
                    margin-left: 0.02rem
                }
            }
        }
    }
    >ul {
        >li {
            border: 1px solid #EBEBEB
            margin-bottom: 0.24rem
            padding: 0.24rem
            display: flex
            .left {
                width: calc(100% - 2.78rem)
                .title {
                    display: flex
                    justify-content: space-between
                    align-items: center
                    >p {
                        width: 100px
                        font-size: 0.16rem
                        color: #666
                        >span {
                            color: #2396F5
                            margin-right: 4px
                        }
                    }
                }
                .li-options-box {
                    display: flex
                    justify-content: space-between
                    >p {
                        width: 86px
                        font-size: 0.16rem
                        color: #666666
                        text-align: right
                        margin-top: 0.32rem
                    }
                    .options {
                        width: calc(100% - 86px)
                        >div {
                            // height: 0.32rem
                            border: 1px solid #EBEBEB
                            display: flex
                            align-items: center
                            justify-content: space-between
                            margin-top: 0.16rem
                            .options-icons {
                                width: 80px
                                font-size: 0.18rem
                                color: #666666
                                >i {
                                    cursor: pointer
                                    margin-right: 0.16rem
                                }
                            }
                        }
                    }
                }
            }
            .right {
                width: 2.3rem
                padding-left: 0.48rem
                .icons {
                    font-size: 0.28rem
                    color: #E0E0E0
                    display: flex
                    justify-content: space-between
                    align-items: center
                    i {
                        cursor: pointer
                    }
                }
                .el-icon-top {
                    margin-right: 0.24rem
                }
            }
        }
    }
}
</style>
